<template>
  <div id="sysDashboard">
    <div class="layout-content">
      <div class="layout-content-main">
        <Card>
          <p slot="title">
              <Icon type="ios-film-outline"></Icon>
              统计量
          </p>
          <Row>
            <Col span="8">
              <Card>
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    注册用户数
                </p>
                <count-to
                  class="user-count"
                  :startVal='0'
                  :endVal='9898'
                  :duration=4000
                  suffix="人"></count-to>
              </Card>
            </Col>
            <Col span="16">
              <Card>
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    总访问量
                </p>
                <count-to
                  class="user-count"
                  :startVal='0'
                  :endVal='1656841256'
                  :duration=4000
                  suffix="人次"></count-to>
              </Card>
            </Col>
          </Row>
        </Card>
        <Card>
          <p slot="title">
              <Icon type="ios-film-outline"></Icon>
              系统信息
          </p>
          <Row>
            <Col span="10">
              <charts ref="memChart" :options="memChart" auto-resize></charts>
            </Col>
            <Col span="14">
              <charts ref="logChart" :options="logChart" auto-resize></charts>
            </Col>
          </Row>
        </Card>
      </div>
    </div>
  </div>
</template>
<script>
import 'echarts/theme/roma';
import countTo from 'vue-count-to';
import {getMetrics} from '@/apis/admin/dashboard';

export default {
  name: 'sysDashboard',
  data: function data () {
    return {
      monitorDataIndex: '',
      memChart: {
        title: {
          text: 'JVM内存',
          bottom: '20px',
          left: '50%',
          textAlign: 'center'
        },
        series: [{
          name: '物理内存',
          type: 'gauge',
          min: 0,
          max: 100,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              width: 10
            }
          },
          data: [{
            value: 0,
            name: 'MB/Used'
          }]
        }]
      },
      logChart: {
        title: {
          text: '访问量',
          bottom: '10px',
          left: '50%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [{
          type: 'category',
          data: ['2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '访问量',
          type: 'line',
          data: [25866, 22345, 13553, 6589, 45256, 68569]
        }]
      }
    };
  },
  mounted: function mounted () {
    this.$nextTick(function () {
      this.monitorDataIndex = setInterval(() => {
        this.getMonitorData();
      }, 5000);
    });
  },
  methods: {
    calcColor: function calcColor (percent) {
      if (percent < 10) {
        return '#EE0000';
      } else if (percent < 20) {
        return '#EE5C42';
      } else if (percent < 40) {
        return '#EEB4B4';
      } else if (percent < 60) {
        return '#C1FFC1';
      } else if (percent < 70) {
        return '#ADFF2F';
      } else if (percent < 80) {
        return '#7CFC00';
      } else if (percent < 90) {
        return '#00EE00';
      }
      return '#00FF00';
    },
    getMonitorData () {
      getMetrics().then(response => {
        // console.log(response);
        let obj = response.data;
        this.memChart.series[0].max = (obj.mem / 1024).toFixed(0);
        let memUsed = ((obj.mem - obj['mem.free']) / 1024).toFixed(0);
        this.memChart.series[0].data[0].value = memUsed;
      });
    }
  },
  beforeDestroy () {
    clearInterval(this.monitorDataIndex);
  },
  components: {
    countTo
  }
};
</script>
<style lang="scss" scoped>
.sell-charts {
  width: 100%;
  height: 200px;
}
.ivu-card {
  .ivu-card-body {
    text-align: center;
  }
}
.user-count {
  font-size: 50px;
  color: #F6416C;
  display: block;
  margin: 10px 0;
  text-align: center;
  font-size: 80px;
  font-weight: 500;
}
</style>
